<template>
	<view class="">
		<view style="margin: 30rpx auto">
			<view class="image-text_1" >
				<view class="tit">
					投诉信息
				</view>
				
				<view class="text-group_1 flex-col">
					<view class="text_8">
						<view class="text_8-left">投诉人：</view>
						<view class="text_8-right">{{ info.name }} </view>
					</view>
					<view class="text_8">
						<view class="text_8-left">投诉人电话：</view>
						<view class="text_8-right">{{ info.phone }} </view>
					</view>

					<view class="text_8">
						<view class="text_8-left">投诉内容：</view>
						<view class="text_8-right">{{ info.memo }} </view>
					</view>
					<view class="text_8">
						<view class="text_8-left">投诉时间：</view>
						<view class="text_8-right">{{ info.createTime }} </view>
					</view>

					<view class="text_8">
						<view class="text_8-left">照片：</view>
						<view class="text_8-right">
							<view class="text_8-right-msg">
								<image class="text_8-right-msg-msg" @click="lookBigImg(item)" v-for="(item,inddex) in info.file" :key="inddex"
									:src="item" mode=""></image>
							</view>
						</view>
					</view>


				</view>

			</view>

		</view>
		<view style="margin: 30rpx auto" v-if="info.deal">
			<view class="image-text_1" >
				<view class="tit">
					回复内容
				</view>
				
				<view class="text-group_1 flex-col">
					<jyf-parser :html="info.deal" ref="article" :tag-style="tagStyle"></jyf-parser>
					
		
				</view>
		
			</view>
		
		</view>
		
		<uni-popup ref="popup" type="center">
			<view class="bigImg">
				<image :src="bigImg" mode="aspectFit"></image>
			</view>
			
		</uni-popup>
	</view>
</template>

<script>
	import parser from "@/components/jyf-parser/jyf-parser";
	export default {
		components: {
			"jyf-parser": parser
		},
		data() {
			return {
				bigImg:'',
				info: {}
			}
		},
		onLoad(options) {
			console.log(options, 'optionsoptions')
			if (options.data) {
				let objStr = decodeURIComponent(options.data);
				let obj = JSON.parse(objStr);
				this.info = obj
				console.log(obj, 'objobjobj')
			}

		},
		methods: {
			lookBigImg(img){
				this.bigImg=img
				this.$refs.popup.open()
			}
		}
	}
</script>

<style lang="scss">
	.bigImg{
		width: 600rpx;
		height: 600rpx;
		image{
			width: 100%;
			height: 100%;
		}
	}
	.tit{
		font-size: 30rpx;
		color: #000;
		margin-bottom: 20rpx;
		font-weight: 600;
	}
	.text-group_1 {
		position: relative;

		.text_9 {

			position: absolute;
			top: 0rpx;
			right: 10rpx;
			color: $maincolor;
			font-size: 24rpx;
		}
	}

	.text_8 {
		line-height: 80rpx;
		border-bottom: 1rpx solid #f5f5f5;
		display: flex;

		.text_8-left {
			width: 30%;
		}

		.text_8-right {
			width: 70%;
			word-wrap: break-word;
			white-space: normal;
			text-align: right;
			.text_8-right-msg {
				display: flex;
				flex-wrap: wrap;

				.text_8-right-msg-msg {
					width: 80rpx;
					height: 80rpx;
					margin: 10rpx;
				}
			}

		}
	}

	.text_7 {
		font-size: 26rpx
	}

	.image-text_1 {
		width: 100%;
		margin: 0 auto;
		background: #fff;
		border-radius: 20rpx;
		padding: 20rpx;

		margin-bottom: 20rpx;
		font-size: 28rpx;
		border-bottom: 1px solid #f5f5f5;
	}

	.msgInfo {
		.msg-close {
			position: absolute;
			width: 60rpx;
			height: 60rpx;
			right: 20rpx;
			top: 10rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		position: relative;
		width: 690rpx;
		height: 800rpx;
		background: #fff;
		padding: 60rpx;
		border-radius: 20rpx;

		.okRead {
			line-height: 100rpx;
			width: 82%;
			position: absolute;
			bottom: 50rpx;
		}

		.msgInfo-tit {
			text-align: center;
			font-size: 38rpx;
			font-weight: 500;
		}

		.msgInfo-msg {
			height: 360rpx;
			overflow-y: scroll;
			// text-align: center;
			font-size: 28rpx;
			word-wrap: break-word;
			/* 旧版浏览器兼容性 */
			overflow-wrap: break-word;
			/* 标准属性 */
			word-break: break-all;
		}
	}

	.active {
		border-bottom: 2rpx solid $maincolor;
		// background: #;
		color: $maincolor !important;
		// border-radius/: 20rpx;
	}

	.changeTab-wrap {
		width: 100%;
		display: flex;
		justify-content: space-around;
		margin: 0 auto;
		position: fixed;
		top: 0;
		background: #fff;

		.changeTab-msg {
			color: #000;
			text-align: center;

			width: 30%;
			line-height: 80rpx;
		}
	}

	.wrap {
		margin: 20rpx auto;
	}
</style>